<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>购物车</h1>
        <table border="1px radio black">
            <thead>
                <td>全选<input type="checkbox" :checked="cheacked" v-on:change="cheackAll"/></td>
                <td>商品名字</td>
                <td>价格</td>
                <td>数量</td>
                <td>总价</td>
                <td></td>
            </thead>
            <tbody>
                <tr v-for="obj in goods">
                    <td ><input type="checkbox" :checked="cheacked" /></td>
                    <td >{{obj.goodsName}}</td>
                    <td >{{obj.price}}</td>
                    <td> 
                      <input type="button" value=" -1 " v-on:click="minus(obj)">
                          {{obj.num}} 
                       <input type="button" value=" +1 " v-on:click="add(obj)">
                     </td>
                    <td >{{obj.num*obj.price}}</td>
                    <td>
                        <input type="button" v-on:click="remove(obj)" value="删除">
                        <input type="button" v-on:click="update(obj)" value="编辑">
                    </td>
                  </tr>
                  <tr>
                    <td colspan="5" align="right">总价：{{sumPrice}}</td>
                  </tr>
            </tbody>
        </table>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                cheacked:false,
                sumPrice: 3850,
                goods:[
                    {
                        goodsName:'java从入门到入土',
                        price:50,
                        num:5
                    },
                    {
                        goodsName:'java从入门到精通',
                        price:150,
                        num:2
                    },
                    {
                        goodsName:'JVM虚拟机',
                        price:30,
                        num:10
                    },
                    {
                        goodsName:'JMM：java内存模型',
                        price:100,
                        num:30
                    } ]
            },
            methods: {
                minus(e){
                    if (e.num>0) {
                        e.num--;
                        this.sumPrice-=e.price;
                    }else{
                        alert("别点我了……")
                    }
                },
                add(e){
                    e.num++;
                    this.sumPrice+=e.price;
                },
                cheackAll(event){
                    console.log( this.cheacked);
                    console.log("选中全选！！");
                    this.cheacked = !this.cheacked 
                },
                remove(e){
                    this.goods.splice(e,1);
                }
            }, 
        });
    </script>
</body>
</html>